<template>
	<uni-collapse-item name="coupon">
		<template v-slot:title>
			<view class="gl-header">
				<view class="gl-header-left" style="align-items: center;">
					<uni-icons type="star" size="16" color="#007aff"></uni-icons>
					<text style="font-weight: bold;">{{title}}</text>
					<text>{{couponList.length+'张'}}</text>
				</view>
				<view class="gl-header-right">
					<view v-if="curItem==='coupon'" @tap.stop.prevent>屏蔽过期的
						<switch :checked="noOut" color="#FFCC33" style="transform:scale(0.7)" @change="switchChange" />
					</view>
					<view v-if="curItem==='coupon'" class="gl-link gl-link-error" style="padding-right: 5px;"
						@click.stop="sendChange">发券</view>
					<view v-if="curItem==='coupon'" class="gl-link gl-link-base" style="padding-right: 20px;"
						@click.stop="loadDefData">刷新</view>
				</view>
			</view>
		</template>
		<view class="content">
			<scroll-view scroll-y="true" style="height: 30vh;">
				<uni-list>
					<uni-list-item v-if="couponList.length === 0" title="---没有找到数据记录---"></uni-list-item>
					<uni-list-item v-for="(item, index) in couponList" :key="index" direction="row"
						:disabled="item.status===0" style="width: 100%;">
						<template v-slot:header>
							<view class="slot-box"></view>
						</template>
						<template v-slot:body>
							<view style="display: flex;width: 100%;">
								<view style="display: flex;flex-direction: column;">
									<text style="font-size: smaller;">{{'面值:'+zipPrice(item.value) + ' * 1张'}}</text>
									<text style="font-size: small;"
										:style="{color:zipCalcTimer(item.outtime)}">{{'有效期:'+item.outtime}}</text>
								</view>
							</view>
						</template>
						<template v-slot:footer>
							<view style="width: 48px;text-align: center;">
								<text style="font-size: small;"
									:style="{color: zipState(item.status).color}">{{zipState(item.status).text}}</text>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</scroll-view>

			<!--模态窗口-->
			<popAddcouponCardVue ref="popAddcouponCard" @refresh="switchChange"></popAddcouponCardVue>
		</view>
	</uni-collapse-item>
</template>

<script>
	import psMethod from '@/common/psMethod';
	import psLib from '@/common/psLib';
	import popAddcouponCardVue from './pop-addcoupon-card.vue';
	export default {
		data() {
			return {
				title: '代金券',
				sConf: getApp().globalData,
				noOutStr: null,
				noOut: true, // 屏蔽过期				
				couponList: [], // 代金券列表 
				sid: null
			}
		},
		props: {
			curItem: {
				type: String,
				default: null
			}
		},
		components: {
			popAddcouponCardVue
		},
		methods: {
			open(e) {
				this.sid = e
				this.loadDefData()
			},
			async loadDefData() {
				await this.loadMyCouponList().then(res => {
					console.log('加载代金券', res);
					this.couponList = res.resmsg
				})
			},
			sendChange() {
				console.log('sendChange');
				this.$refs.popAddcouponCard.open(this.sid)
			},
			checkChange(e) {
				console.log('checkChange', e);
			},
			switchChange(e = null) {
				console.log('switchChange');
				if (e) {
					this.noOut = e.detail.value
				}
				this.loadMyCouponList().then(res => {
					console.log('加载代金券', res);
					this.couponList = res.resmsg
				})
			},
			loadMyCouponList() {
				let host = this.sConf.host + '/admin/couponList/';
				let token = this.sConf.auth.token || '';
				let data = {
					sid: this.sid,
					ordering: 'id'
				}
				if (this.noOut) {
					data['outtime'] = 1
				}
				console.log('请求参数->', data);
				return new Promise((resolve, reject) => {
					psMethod.authenticatorGetSync(host, token, data).then(res => {
						resolve(res)
					}).catch(err => {
						reject(err)
					})
				})
			},
			zipPrice(e) {
				return '￥' + (e / 100).toFixed(2) + '元'
			},
			zipCalcTimer(e) {
				let timer = psLib.zipCalcTimer(e)
				if (timer < 0) {
					return '#dd524d'
				} else if (timer < 3600 * 24 * 10) {
					return '#f0ad4e'
				} else {
					return '#999'
				}
			},
			zipState(e) {
				return psLib.filterStatus(e)
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>